<template>
  <div class="view-fill">
    <div v-if="!showModify.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button v-if="canUpdate" @click="update">编辑</el-button>
        </template>
        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <BasicInformation :info="baseInfoList">
            </BasicInformation>
          </div>
        </div>
        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <Tooltip :text="'养护项目'" />
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :query="tableInfo.query"
                :field-list="tableInfo.fieldList"
                :isDynamic="true"
              />
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <Modify
      v-if="showModify.visible"
      :id="id"
      v-model:visible="showModify.visible"
      @returnModify="getMain"
    ></Modify>
  </div>
</template>

<script setup>
import {
  getDeviceMaintenanceTemplateById,
} from '@/api/device'
import Modify from './modify.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps(['visible', 'id', 'title'])
//基础信息
const baseInfoList = ref({
  data: [],
  fieldList: [
    {
      label: '模板名称',
      value: 'name',
      type: 'text',
    },
    {
      label: '部门',
      value: 'deptName',
      type: 'text',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'text',
    },
  ],
})
//养护资产
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
  {
      label: '养护部位',
      value: 'maintenanceParts',
    },
    {
      label: '养护内容与要求',
      value: 'contentRequire',
    },
    {
      label: '备注',
      value: 'remark',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [],
  },
})
const showModify = ref({
  title: '编辑',
  visible: false,
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

const canUpdate = computed(() => {
  return (
    proxy.$permission('deviceMaintenanceTemplate:update')
  )
})

watch(
  () => props.visible,
  (newVal) => {
    showDialog.value = newVal
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  getMain()
})

// 编辑
function update() {
  showModify.value.visible = true
  showModify.value.title = '修改养护模板'
}
function returnBack() {
  emit('returnBack', false)
}
function getMain() {
  getDeviceMaintenanceTemplateById(props.id).then((resp) => {
    if (resp && resp.success) {
      baseInfoList.value.data = resp.data
      tableInfo.value.data = resp.data.programList || []
    }
  })
}
</script>
<style scoped lang="scss">
</style>
